import { createApp } from "vue";
import MessageIndex from "../components/MessageIndex.vue";

export type MessageType = "success" | "error" | "default";

const createMessage = (message: string, type: MessageType, timeout = 2000) => {
  // 创建实例
  //   第一个参数，根节点组件
  // 第二个参数，是传给根节点组件的 props (可选的)
  const messageInstance = createApp(MessageIndex, { message, type });
  //   创建节点
  const mountNode = document.createElement("div");
  mountNode.id = "message";
  //   挂载节点
  document.body.appendChild(mountNode);
  //   挂在组件
  messageInstance.mount(mountNode);
  setTimeout(() => {
    // 卸载组件
    messageInstance.unmount();
    // 删除节点
    document.body.removeChild(mountNode);
  }, timeout);
};

export default createMessage;
